<template>
  <div @click="goPRPage2" class="cpsylb-card">
    <el-row>
        <el-col :span="24">
            <img src="@/assets/images/bgc.png" alt="">
        </el-col>
        <el-col :span="24">
            <div class="content">
                <el-row >
                    <el-col class="neirong" :span="24">
                        <el-row class="cardname" justify="space-between">
                            <el-col :span="6">{{ props.item.cropName }}</el-col>
                            <el-col :span="6">
                                <button class="cardbtn">已认证</button>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col class="neirong" :span="24">
                        <div>
                            产地: {{ props.item.plantingLocation || '山东省寿光市' }}
                        </div>
                    </el-col>
                    <el-col class="neirong" :span="24">
                        <div>
                            溯源码: {{ props.item.traceabilityCode || '12324454354345' }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script setup> 
import router from '@/router';
import { ref, reactive, toRaw, watch } from 'vue'

const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})

const goPRPage2 = () => {
    // 只传递产品ID到PRPage2，让目标页面通过ID查询数据
    router.push({
        name: 'PRPage2',
        query: {
            primaryId: props.item.primaryId,
            cropId: props.item.cropId
        }
    })
}
</script>

<style scoped>
.cpsylb-card{
    width: 100%;
    height: 100%;
    margin: 15px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(128, 128, 128, 0.445) 2px 2px 10px;
}
img{
    width: 430px;
    height: 260px;
}
.content{
    padding: 10px;
    text-align: left;
}
.neirong{
    margin: 5px;
    color: rgb(128, 128, 128);
}
.cardname{
    font-size: 20px;
    color: #000;
}
.cardbtn{
    font-size: 16px;
    color: #ffffff;
    border: none;
    background-color: #2e7d32;
    width: 80px;
    height: 35px;
    border-radius: 10px;
}
</style>